<template>
    <div class="news">
         <Row>
        <Col span="4"><Tree :data="data1" @on-select-change="onTreeSelectChange"></Tree></Col>
        <Col span="20">
            <Row>

        <Col span="4"><Button type="primary" @click="addData">添加数据</Button>
        <Button type="error" @click="removesData">删除多条</Button>
        </Col>
        <Col span="12"><Input search enter-button v-model="name" style="width:200px float:'left'" placeholder="请输入关键字" @on-search="searchData"/></Col>
    </Row>
        <Table stripe height="400" border :columns="columns" :data="listData" @on-selection-change="onSelectionChange"></Table>
        <Page :total="total" show-sizer @on-change="onChangePage" @on-page-size-change="onPageSizeChange" :page-size-opts="[5,10,20,30,40,50]"/>
        <Modal
        v-model    = "modal1"
        title      = "详细信息"
        @on-ok     = "ok"
        @on-cancel = "cancel"
        width = '700'
        :mask-closable="false"
        :footer-hide = true>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="商品名称" prop="goodsname">
                    <Input v-model="formValidate.goodsname" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="商品类型" prop="type">
                    <Input v-model="formValidate.type" placeholder="请输入作者"></Input>
                </FormItem>

                <FormItem label="关键字" prop="keyword">
                    <Input v-model="formValidate.keyword" placeholder="请输入类型"></Input>
                </FormItem>
                <FormItem label="商品库存" prop="total">
                    <Input v-model="formValidate.total" placeholder="请输入关键字"></Input>
                </FormItem>
                <FormItem label="商品价格" prop="price">
                    <Input v-model="formValidate.price" placeholder="请输入备注"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">清除</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal
        v-model    = "modal2"
        title      = "评论信息"
        :fullscreen = true
        :footer-hide = true>
            <comments :bdid="bdid" :bdtype=1 ref="mycomments" @plnum="plnum"></comments>
        </Modal>
        </Col>

    </Row>

    </div>
</template>
<script>
import  { Base } from '../mixins/Base'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import comments from './Comments'
export default {
    components: {
        quillEditor,
        comments,

    },
  mixins:[Base],
  data(){
    return {
     data1:[{a:1}],
     bdid:'',
     modal2:false,
     //要改
     module: 'product',
     formValidate: {
        goodsname: '',
        type: '',
        keyword: '',
        total:'',
        price: '',
        number:'',
        cateId:'',
    },
    haha:1,
    ruleValidate: {
        goodsname: [
            {required: true, message: '商品名称不能为空', trigger: 'blur' },
        ],
        type: [
            { required: true, message: '商品类型不能为空', trigger: 'blur' },
        ],
        keyword: [
            { required: true, message: '关键字不能为空', trigger: 'blur' }
        ],
        total: [
            { required: true, message: '商品库存不能为空', trigger: 'blur' }
        ],
        price: [
            { required: true, message: '商品价格不能为空', trigger: 'blur' }
        ],

    },
      columns: [
          {
            type: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left',
          },
          {
              title: '商品名称',
              key  : 'goodsname',
              fixed: 'left',
              width:120
          },
          {
              title: '商品分类',
              key  : 'type',
              width:100
          },
          {
              title: '关键字',
              key  : 'keyword',
              width:100,


          },
          {
              title: '库存',
              key  : 'total',
              width:100
          },

          {
              title: '价格',
              key  : 'price',
              width:150
          },
          {
              title: '评论数',
              key  : 'number',
              width:120,
              sortable: true,
          },

          {
              title: '日期',
              key  : 'date',
              width:150,
              render:function(h,params){
                //console.log(params.row.date);
                var date=new Date(+new Date(new Date(params.row.date).toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
                //console.log(date);
                return h('span',date);
              }
          },

          {
            title: '操作',
            key: 'action',
            width: 200,
            fixed: 'right',
            align: 'center',
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'info',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                this.showcomment(params.row._id);
                            }
                        }
                    }, '评论'),
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                // this.show(params.index)
                                this.editData(params.row._id);

                            }
                        }
                    }, '修改'),
                    h('Button', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        on: {
                            click: () => {
                                this.removeData(params.row._id);
                            }
                        }
                    }, '删除')
                ]);
            }
        }
      ]
    }
  },
  methods: {
      showcomment(id){
          //console.log(id);
          this.bdid=id;
          //console.log(this.bdid);
          this.modal2=true
          let _this= this;
          setTimeout(function(){
             _this.$refs.mycomments.getcomData();
          },100)
          //this.$refs.mycomments.getcomData();

      },
    hotbd(res){
       res.data.hot=Number(res.data.hot);
    },
    onTreeSelectChange(node){
        if( node[0]){
           this.formValidate.cateId = node[0]._id;
           console.log(this.formValidate.cateId);
            this.getData();
        }
    },
    addData(){
        console.log(this.formValidate.cateId);
        if(this.formValidate.cateId === ''){
            this.$Message.error('请选择一个分类');
        }else{
        var catenum =this.formValidate.cateId
        Object.assign(this.formValidate,this.$options.data().formValidate);
        this.formValidate.cateId=catenum;
        console.log(this.formValidate);
        this.modal1 = true;
        };
    },
    getTreeData(){
        this.axios({
            url   : `${this.GLOBAL.serverurl}cate/list/2`,
            method: 'post'
        }).then(res=>{
            this.data1 = res.data;
        })
    },
    plnum(a){
        this.getData()
    }
  },
  mounted(){
            this.getTreeData();
  }
}
</script>

<style scoped>

</style>